<template>
  <div class="FinanceRefundRecord">
    <el-form ref="form" :model="form" label-position="top" class="myform">
      <div>
        <el-form-item label="款号" class="myform-item">
          <el-input
            v-model="form.type_no"
            placeholder="请输入款号"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="付款时间（必填）" class="myform-item">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="form.pay_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="售中/售后退款" class="myform-item">
          <el-select
            v-model="form.refund_phase"
            placeholder="请选择售中/售后退款"
          >
            <el-option
              v-for="item in optionsone"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退货状态 " class="myform-item">
          <el-select
            v-model="form.has_good_return"
            placeholder="请选择退货状态"
          >
            <el-option
              v-for="item in optionsthree"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台" class="myform-item">
          <el-select
            v-model="form.source_type"
            placeholder="请选择平台"
          >
            <el-option
              v-for="item in optionstwo"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        
      </div>
      <div>
        <el-form-item style="margin-top: 50px">
          <el-button @click="onSearch" type="primary" :loading="loadingsearch"
            >查询</el-button
          >
          <el-button @click="onExport" :disabled="!qxobj.export" :loading="loadingexport">导出</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div>
      <el-table :data="tableDataAll" border style="width: 100%">
        <el-table-column
          prop="pay_amount"
          label="商品交易总额"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="amount"
          label="退款总金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="count"
          label="退款总数"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="refund_rate" label="退款率" align="center">
          <template slot-scope="{ row }">
            {{ row.refund_rate * 100 }}%
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="FinanceRefundRecord-two" v-if="tableData.length">
      <div>
        <div>售中/售后退款占比图</div>
        <div>部分/全额退款占比图</div>
      </div>
      <div>
        <div>
          <div id="postpie" class="echartsStyle"></div>
        </div>
        <div>
          <div id="postpiekong" class="echartsStyle"></div>
        </div>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="商品编码" align="center" prop="refund_id">
      </el-table-column>
      <el-table-column label="款号" align="center" prop="type_no">
      </el-table-column>
      <el-table-column label="付款时间" align="center" prop="pay_time">
      </el-table-column>
      <el-table-column label="售中/售后退款" align="center" prop="refund_phase">
        <template slot-scope="{ row }">
          {{ row.refund_phase == "onsale" ? "售中" : "售后" }}
        </template>
      </el-table-column>
      <el-table-column
        label="是否需要退货"
        align="center"
        prop="has_good_return"
      >
        <template slot-scope="{ row }">
          {{ row.has_good_return == "false" ? "仅退款" : "退货退款" }}
        </template>
      </el-table-column>
      <el-table-column label="退款金额" align="center" prop="refund_fee">
      </el-table-column>
      <el-table-column label="退款时间" align="center" prop="created">
      </el-table-column>
    </el-table>

    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postApiGetrefunddate"
    />
  </div>
</template>

<script>
import * as echarts from "echarts";
import { postpie, postpiekong } from "./postponenum.js";
import {
  postApiGetrefunddate,
  postApiGetrefunddate_piechart,
  postExcelRefundexport,
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      qxobj:{},
      loadingsearch: false,
      loadingexport: false,
      refundtotal: "",
      refundEchartsData: "",
      form: {
        pay_time: "",
        has_good_return: "",
        refund_phase: "",
        type_no: "",
        source_type: "",
        page: 1,
        size: 10,
      },
      optionsone: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "onsale",
          label: "售中",
        },
        {
          value: "aftersale",
          label: "售后",
        },
      ],
      optionstwo: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "1",
          label: "淘宝",
        },
        {
          value: "2",
          label: "天猫",
        },
      ],
      optionsthree: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "false",
          label: "仅退款",
        },
        {
          value: "true",
          label: "退货退款",
        },
      ],
      tableData: [],
      tableDataAll: [],
      total: 0,
    };
  },
  async activated() {
    this.qxobj = JSON.parse(this.$route.query.qxobj)
    let form = this.form;
    await this.postApiGetrefunddate(form);
    await this.postApiGetrefunddate_piechart(form);
    await this.postpie(postpie(this.refundEchartsData.sales));
    await this.postpiekong(postpiekong(this.refundEchartsData.refund));
  },
  methods: {
    async postpiekong(data) {
      let myChart = echarts.init(document.getElementById("postpiekong"));
      // 绘制图表
      myChart.setOption(data);
    },
    async postpie(data) {
      let myChart = echarts.init(document.getElementById("postpie"));
      // 绘制图表
      myChart.setOption(data);
    },
    // 查询
    async onSearch() {
      this.form.page = 1;
      this.form.size = 10;
      let form = this.form;
      await this.postApiGetrefunddate(form);
      await this.postApiGetrefunddate_piechart(form);
      await this.postpie(postpie(this.refundEchartsData.sales));
      await this.postpiekong(postpiekong(this.refundEchartsData.refund));
    },
    // 退款记录-列表
    async postApiGetrefunddate(data) {
      this.loadingsearch = true;
      let form = JSON.parse(JSON.stringify(data));
      if (
        (form.pay_time ||
          form.has_good_return ||
          form.refund_phase ||
          form.type_no || form.source_type) &&
        !form.pay_time
      ) {
        this.$message({
          message: "请选择付款时间",
          type: "warning",
        });
        this.loadingsearch = false;
        return;
      }
      if (form.pay_time) {
        form.pay_time = form.pay_time[0] + "/" + form.pay_time[1];
      }
      await postApiGetrefunddate(form)
        .then((res) => {
          console.log("退款记录列表", res);
          this.refundtotal = res.data.amount || 0;
          this.total = Number(res.total);
          this.tableData = res.data.list;
          this.loadingsearch = false;

          this.tableDataAll = [
            {
              amount: res.data.amount,
              count: res.data.count,
              pay_amount: res.data.pay_amount,
              refund_rate: res.data.refund_rate,
            },
          ];
        })
        .catch((err) => {
          this.loadingsearch = false;
        });
    },
    // 退款记录-图表
    async postApiGetrefunddate_piechart(data) {
      let form = JSON.parse(JSON.stringify(data));
      if (
        (form.pay_time ||
          form.has_good_return ||
          form.refund_phase ||
          form.type_no || form.source_type) &&
        !form.pay_time
      ) {
        return;
      }
      if (form.pay_time) {
        form.pay_time = form.pay_time[0] + "/" + form.pay_time[1];
      }
      delete form.page;
      delete form.size;
      await postApiGetrefunddate_piechart(form).then((res) => {
        console.log("退款记录-图表", res);
        this.refundEchartsData = res.data;
      });
    },
    // 退款记录-导出
    onExport() {
      let form = this.form;
      this.postExcelRefundexport(form);
    },
    async postExcelRefundexport(data) {
      this.loadingexport = true;
      let form = JSON.parse(JSON.stringify(data));
      if (
        (form.pay_time ||
          form.has_good_return ||
          form.refund_phase ||
          form.type_no || form.source_type) &&
        !form.pay_time
      ) {
        this.$message({
          message: "请选择付款时间",
          type: "warning",
        });
        this.loadingexport = false;
        return;
      }
      if (form.pay_time) {
        form.pay_time = form.pay_time[0] + "/" + form.pay_time[1];
      }
      delete form.page;
      delete form.size;
      await postExcelRefundexport(form)
        .then((res) => {
          console.log("退款记录-导出", res);
          this.loadingexport = false;
        })
        .catch((err) => {
          this.loadingexport = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.myform {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  > div {
    display: flex;
    flex-wrap: wrap;
  }
  &-item {
    margin-right: 10px;
  }
}
.echartsStyle {
  width: calc(100% - 40px);
  height: 300px;
}
.FinanceRefundRecord {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
  &-one {
    color: red;
  }
  &-two {
    border: 1px solid #f0f1f7;
    > div {
      display: flex;
      > div {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    > div:nth-child(1) {
      background: #f0f1f7;
      height: 50px;
    }
    > div:nth-child(2) {
      height: 400px;
    }
  }
}
</style>